<template>
  <div class="yc-avatar-uploader">
    <el-upload action="#" :class="{ 'is-empty': isEmpty }" :style="styleUploader" :accept="accept" :multiple="false"
      :show-file-list="false" :http-request="handleHttpRequest">
      <img v-if="currentValue" :src="currentValue" class="avatar" :style="styleAvatar">
      <i v-else class="el-icon-plus icon" :style="styleIcon" />
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'yc-upload-avatar',
  inject: ['elForm'],
  props: {
    value: {
      type: [String, Array, Object, File]
    },
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    },
    fileSize: {
      type: Number,
      default: 1
    },
    accept: {
      type: String,
      default: '.jpg,.jpeg,.png'
    },
    uploadFunction: {
      type: Function
    }
  },
  watch: {
    value: {
      handler () {
        this.handleResetCurrentValue()
      },
      immediate: true
    }
  },
  computed: {
    model: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    },
    isEmpty () {
      return !this.currentValue
    },
    styleUploader () {
      return {
        height: this.height + 'px',
        width: this.width + 'px'
      }
    },
    styleAvatar () {
      return {
        height: this.height - 2 + 'px',
        width: this.width - 2 + 'px'
      }
    },
    styleIcon () {
      return {
        height: this.height - 2 + 'px',
        width: this.width - 2 + 'px',
        lineHeight: this.height - 2 + 'px'
      }
    }
  },
  data () {
    return {
      currentValue: '',
      loading: false
    }
  },
  methods: {
    handleResetCurrentValue () {
      if (this.value === '') {
        this.currentValue = ''
      } else if (this.$_.isString(this.value) && this.value !== '') {
        this.currentValue = this.value
      }
    },
    checkLimit (file) {
      let result = true
      var fileEx = file.name.substring(file.name.lastIndexOf('.'))
      if (this.accept.indexOf(fileEx) < 0) {
        this.$message.error(`文件格式有误`)
        return false
      }
      if (file.size > this.fileSize * 1024 * 1024) {
        this.$message.error(`图片大小不能超过${this.fileSize}MB`)
        result = false
      }
      return result
    },
    handleSuccess (res, file) {

    },
    handleHttpRequest (params) {
      const file = params.file
      this.checkLimit(file)
      if (this.uploadFunction) {
        this.uploadFunction(file).then(res => {
          var { code, data } = res
          if (code === 200) {
            this.currentValue = data
            this.model = this.currentValue
            if (this.elForm) {
              this.elForm.validateField(this.$attrs.prop)
            }
            params.onSuccess()
          } else {
            params.onError()
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.yc-avatar-uploader {
  &.is-empty {
    .el-upload {
      border-style: dashed;
    }
  }
  .el-upload {
    border-color: $color-border-1;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #c0c4cc;
    }
  }
  .icon {
    font-size: 28px;
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
  }
}
</style>
